<!-- 
  props额外配置
    1. 类型  string 布尔 number 对象 数组 function 
    2. 默认值  复杂类型 工厂函数指定默认值 -> 复用的时候数据不影响
    3. required  必填项  一旦定义了就必须传否则就报警告 -> 一些对组件功能影响很大的属性
    4. validator校验函数 对传入的props做一些复杂校验  这个函数的参数是传递的实参  返回值必须
       是一个布尔值  布尔值为false 报警告
       props:{
         type:{
           type:String,
           validator:(value)=>{
              return ['success','danger'].includes(value)
           }
         }
       }

    注意：任何情况下都不应该直接写一个数组的格式 必须是一个对象

  组件封装
    1. 纯UI显示类 - 骨架屏组件
       1. 场景:  类似于loading 减少用户等待焦虑
       2. props: width height backgroundColor (类型)

       注意事项: 控制css属性的时候如果出现显示失败 检查是否是合法的属性值 （px）

       业务使用：
         思路：通过template + v-if + 当前是否有真实数据 实现一个多模板的渲染
         (单图多图  / 简单题 多选题 单选题  / 骨架屏应用)

    2. 交互类 - 轮播图组件
        1. 场景: 广告banner切换
        2. 实现思路：控制位移 / 控制透明度(重点)
        3. 控制透明度的实现
           1. 通过绝对定位把所有需要显式的图片列表盒子定位到一起
           2. 初始状态下透明度都为0
           3. 设计一个fade的类名 有一个类名透明度就会变成1

        组件封装思路
          1. 搭建了组件的静态结构 使用绝对定位把所有图片定位到一起  然后设计fade类 有他就显示
          2. 搭建了和图片个数一致的点击切换按钮  通过使用一样的数据进行遍历
          3. 实现点击交互 (点击哪个小图标就把它的下标值记录下来 然后通过动态类名控制图片是否拥有
          fade类, 控制的判断条件就是当前的图片下标和记录的下标是否一致，如果一致就显示)
          4. 使用定时器实现下标值自增来实现自动播放
          5. 找到用户可能会自定义的部分 抽离成props 其中包括 图片列表 / 是否开启自动播放 / 间隔时间

    3. 插槽类 - 面板组件
        1. 背景: 新鲜好物 和 人气推荐 模块的结构非常类似
        2. 封装模式
           1. 找到那些可能自定义的位置  主标题 / 副标题 / 右侧内容 / 主体内容
           2. 取舍prop 还是插槽  
              主标题和副标题 都是纯文本 -> prop
              右侧内容 / 主体内容 因为支持的模板比较复杂  -> slot (具名插槽)
           3. 不考虑任何自定义 先完整的把组件的结构搭起来 -> 把静态按照自定义的方案转成动态渲染

    4. 交互类 - 查看更多组件
        1. 背景: 为了提供一个展开更多或者全部的入口 供用户点击
        2. 封装逻辑
           1. 因为是要实现路由切换  (编程式 / 声明式) 选择声明式 <router-link/>
           2. 把要跳换到那里去 path设计成一个prop传入  然后<router-link :to="path"/>

  prop vs slot
    1. prop传递的是数据
    2. slot传递的是模板结构 (有效的html模板都是可以的)
 -->

<script>
  const list = new Array(60000).fill(1)
  console.log(list)
  // for (let i = 0; i < list.length; i++) {
  //   console.log(i);
  // }

  let num = 5000 // 一个task中执行的次数
  let time = list.length / num  // 需要形成的task个数
  for (let i = 0; i < time; i++) {
    setTimeout(() => {
      for (let j = 0; j < num; j++) {
        console.log(1)
      }
    }, 20)
  }
</script>